<template>
    <div class="section">
        <ul>
            <li v-for="item in listData">{{ item }}</li>
            <!-- <li>无序列表2</li>
            <li>无序列表3</li>
            <li>无序列表4</li>
            <li>无序列表5</li> -->
        </ul>
        <!-- 使用defineProps接收完数据可直接调用 -->
        <p>{{ msg }}-{{ boo }}</p>

        <button @click="clickBtn">给父组件传递数据</button>
    </div>
</template>

<script setup lang="ts">

//子组件接受父组件传递的数据通过defineProps方法进行接受
    defineProps<{
        msg?:string,
        listData?:Array<string>,
        boo?:number
    }>()

//子组件给父组件传递数据-事件映射defineEmits方法进行传参

//自定义事件sendCom给父组件传递数据

    const emit=defineEmits<{
        sendCom:[id:number]
    }>()

    //手动传递映射方法及数据
function clickBtn(){
    //通过调用defineEmits方法进行传递数据
        // emit('sendCom',1)
    }

//自动传递映射方法及数据
emit('sendCom',2)
</script>

<style scoped lang="less">
.section{
    width: 100%;
    height: 500px;
    background-color:gray ;
    ul{
        li{
            background-color: red;
            &:nth-child(2n){
                background-color: green;
            }
        }
    }
}
</style>